<template>
    <div class="dutymodule-otherteacherduty">

        <div class="cont-table">
            <Table border stripe :columns="columns" :data="data" :loading="load"></Table>
        </div>

        <div class="cont-page">
            <Page :total="pageDate.total" :page-size="pageDate.per_page" :current="pageDate.current_page" @on-change="pagesData" show-total></Page>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        condition: {
            type: String
        }
    },
    data () {
        return {
            load: true,
            pageDate: {
                total: 0,
                current_page: 1,
                per_page: 0
            },
            data: [],
            columns: [
                {
                    title: '班级',
                    minWidth: 100,
                    align: 'center',
                    fixed: 'left',
                    render: (h, params) => {
                        let name = params.row.class.eclass_name.zh
                        return h('div', name)
                    }
                },
                {
                    title: '班级信息',
                    align: 'center',
                    children: [
                        {
                            title: '年级',
                            minWidth: 150,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.grade.grade_name.zh
                                return h('div', name)
                            }
                        },
                        {
                            title: '实到人数',
                            minWidth: 100,
                            align: 'center',
                            key: 'classnumber',
                        },
                        {
                            title: '值班老师',
                            minWidth: 200,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.dutyteacher_name?params.row.dutyteacher_name.teacher_name.zh:''
                                return h('div', name)
                            }
                        },
                        {
                            title: '值班自习',
                            minWidth: 150,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.types == '1'?'早自习':params.row.types == '2'?'第一晚自习':params.row.types == '3'?'第二晚自习':params.row.types == '4'?'第三晚自习':params.row.types == '5'?'早读':params.row.types == '6'?'自愿值班':''
                                return h('div', name)
                            }
                        },
                        {
                            title: '值班时间',
                            minWidth: 150,
                            align: 'center',
                            key: 'created_at',
                        },
                        {
                            title: '值班领导',
                            minWidth: 150,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.user_ids_name?params.row.user_ids_name.teacher_name:''
                                return h('div', name)
                            }
                        },
                    ]
                },
                {
                    title: '是否确认',
                    minWidth: 100,
                    align: 'center',
                    render: (h, params) => {
                        let name = params.row.section == '1'? '未确认':'已确认'
                        let color = params.row.section == '1'? '#ed3f14':'#47cb89'
                        return h('div', {
                            style: {
                                color: color
                            }
                        }, name)
                    }
                },
                {
                    title: '细则',
                    align: 'center',
                    children: [
                        {
                            title: '细则状态',
                            minWidth: 100,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.rules.classification
                                return h('div', {
                                    style: {
                                        color: name == 1?'#19be6b':'#ed3f14',
                                    }
                                }, name == 1?'加分':'减分')
                            }
                        },
                        {
                            title: '细则信息',
                            minWidth: 200,
                            align: 'center',
                            render: (h, params) => {
                                let name = params.row.rules.entry_content
                                return h('div', name)
                            }
                        },
                    ]
                },
                {
                    title: '现场图片',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        if(params.row.img != null) {
                            return h('div', [
                                h('img', {
                                    attrs: {
                                        src: params.row.img
                                    },
                                    style: {
                                        width:'100px',
                                        height:'40px',
                                        verticalAlign: 'middle',
                                    },
                                    on: {
                                        click: () => {
                                            this.picture(params.row.img)
                                        }
                                    }
                                }),
                            ]);
                        }else{
                            return h('div', '暂无图片');
                        }
                    }
                },
                {
                    title: '备注',
                    minWidth: 150,
                    align: 'center',
                    render:(h,params)=> {
                        return h('span',params.row.remarks?params.row.remarks.zh?params.row.remarks.zh:params.row.remarks.mn:'')
                    },
                },
            ],
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 数据              
         * @param   {value}         分页
         * 
         ************************************************************/
        pagesData (value) {
            this.data = []
            this.load = true
            this.queryData (value)
        },
        
        /************************************************************
         * 
         * 数据              
         * @param   {value}         分页
         * 
         ************************************************************/
        queryData (value) {
            this.data = []  
            this.$http.get(this.condition + '?page=' + value).then(val=>{
                this.load = false
                this.data = val.data
                this.pageDate.per_page = val.pages.per_page
                this.pageDate.total = val.pages.total
                this.pageDate.current_page = val.pages.current_page
            }).catch(err => {
                this.load = false
                console.log(err)
            })
        },
    },
    created () {
        this.queryData (1)
    },
}
</script>
<style lang="less">
.dutymodule-otherteacherduty{
    width: 100%;
    height: 100%;
    position: relative;
    .cont-table{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 50px;
        overflow: auto;
    }
    .cont-page{
        height: 43px;
        padding-top: 10px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: 1px solid #dddee1;
    }
}
</style>
